import React, { Component } from 'react'
import { View, Text, Image, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { pTx } from "../utils/dimensions"
import httpApi from "../api"
import Avatar from "./avatar"

export class PersonalBusinessCard extends Component {
    constructor(props) {
        super(props)
        this.state = {
            item: (this.props.item.M?.split(' '))
        }
    }
    render() {
        return (
            <View style={styles.blcok}>
                <View style={styles.card}>
                    <Avatar style={styles.cardImage} source={{ uri: this.state.item[1] }} />
                    <Text style={styles.cardName} ellipsizeMode={'tail'} numberOfLines={1}>{this.state.item[2]}</Text>
                </View>
                <Text style={styles.styleText}>个人名片</Text>
            </View>
        )
    }
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(PersonalBusinessCard)

const styles = StyleSheet.create({
    blcok: {
        backgroundColor: "#fff",
        width: pTx(230),
        borderRadius: pTx(6),
    },
    card: {
        flexDirection: "row",
        alignItems: "center",
        marginHorizontal: pTx(15),
        paddingVertical: pTx(10),
        borderBottomColor: "rgba(0,0,0,0.1)",
        borderBottomWidth: 1,
    },
    cardImage: {
        width: pTx(50),
        height: pTx(50),
    },
    cardName: {
        width: pTx(120),
        marginLeft: pTx(15),
        fontSize: pTx(16),
        color: "#000"
    },
    styleText: {
        paddingHorizontal: pTx(15),
        fontSize: pTx(12),
        paddingVertical: pTx(3),
    }
})